﻿<script type="text/javascript">
    $('.chzn-drop').css('left', '0px');
    $('.chzn-drop').css('display', 'none');
    $('.chzn-single').on("click", function (e) {
        $(this).toggleClass('chzn-single-with-drop');
        $(this).next().toggleClass('visible');
        e.preventDefault();
    });

</script>



<style>
    .grid-style1 .item .image, .grid-style2 .item .image, .list-style .item .image {
        height: 212px !important;
    }

        .grid-style1 .item .image img, .grid-style2 .item .image img, .list-style .item .image img {
            width: initial !important;
            height: 100% !important;
        }

    .visible {
        display: block !important;
    }

    .chzn-results li:hover {
        background-color: #C90928;
        color: white;
    }

    .tab-pane {
        padding-top: 0px !important;
    }

    .marginTop {
        margin-top: 0px !important;
    }

    @media only screen and (max-width: 500px) {
        .form-control-large {
            width: 100% !important;
        }
    }

    .form-control-large {
        width: 200px;
    }

    li.active a {
        background-color: #C90928 !important;
        color: white !important;
        border: 1px solid #C90928 !important;
    }

    .tab-content > .active {
        border: 0px !important;
    }

    ul.social-networks {
        background-color: rgba(255,255,255,0.2);
        padding-top: 5px;
        padding-bottom: 5px;
        border-radius: 6px;
    }

    .floatNone {
        float: none !important;
    }

    .break-block {
        display: block;
    }

    .form-responsive {
        width: 200px;
    }

    @media (max-width: 1218px) and (min-width: 100px) {
        .tab-content {
            top: -39em;
        }

        .break-block {
            display: none;
        }

        .form-responsive {
            width: 188px;
        }
    }

    .tab-pane-container {
        margin-top: 0px !important;
    }



    @media (min-width: 767px ) and (max-width: 1218px) {
        .tab-pane-container {
            margin-top: 39% !important;
        }

        .tab-content {
            position: relative;
        }

        .break-block {
            display: none;
        }

        .form-responsive {
            width: 188px;
        }
    }

    #search_bedrooms_chzn_o_2 a {
        color: black;
    }

    #properties_map img {
        width: 100%;
        height: 100%;
    }

    .contact-us li {
        margin: 0px;
        padding: 0;
        display: list-item;
    }

    .tablet-form-size {
        width: 100% !important;
        margin: 0 !important;
    }

    .tablet-tab-container {
        width: 74% !important;
        float: none !important;
        padding-top: 1px !important;
        margin-top: 0% !important;
        margin: 0 auto;
    }

    .col-sm-12 {
        min-height: 0px !important;
    }

    .mobile-btn-height {
        line-height: 16px !important;
        padding-top: 7px !important;
        height: 50px !important;
    }

    iframe {
        width: 100%;
        max-width: 700px;
        margin-top: 20px;
    }
</style>

<div id="home-map">
    <div id="properties_map" style="position: relative; overflow: hidden;">
        <img src="images/banners/home-page.jpg" style="width:100%" />
    </div>

    <!-- BEGIN MAP PROPERTY FILTER -->
    <div id="map-property-filter">
        <div class="container">
            <div class="col-md-12" style="height:0px!important;">
                <ul style="margin-top:-200px!important;" class="nav nav-justified nav-tabs">
                    <li class="active"><a data-target="#tab-sale" data-toggle="tab">Sale</a></li>
                    <li><a data-target="#tab-rent" data-toggle="tab">Rent</a></li>
                    <li><a data-target="#tab-transaction" data-toggle="tab">Transaction Record</a></li>
                    <li><a target="_blank" href="/properties/auction">Auction</a></li>
                    <li><a target="_blank" href="/properties/marketingproject">Marketing Project</a></li>
                    <li><a target="_blank" href="/nearby">Nearby</a></li>
                    <li><a target="_blank" href="/map-search">Map Search</a></li>
                </ul>

                <div class="tab-content">
                    <div ng-show="is_mobile == true && is_tablet == false" class="form-control-small"
                         style="padding-left: 13px;padding-right: 13px;background: rgba(255,255,255,0.7);">

                        <div id="search_bedrooms_chzn" class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 38.199px;margin-top:1em" title="">
                            <a ng-click="updateTabChanged = true" href="javascript:void(0)" class="chzn-single chzn-default" tabindex="-1">
                                <span>{{ currentActiveTab }}</span><div><b></b></div>
                            </a>
                            <div ng-show="updateTabChanged == true" class="chzn-drop" style="left:-9000px;">
                                <div class="chzn-search"><input type="text" autocomplete="off"></div>
                                <ul class="chzn-results">
                                    <li id="search_bedrooms_chzn_o_1" class="active-result" ng-click="updateTab('sale',false)">Sale</li>
                                    <li id="search_bedrooms_chzn_o_2" class="active-result" ng-click="updateTab('rent',false)">Rent</li>
                                    <li id="search_bedrooms_chzn_o_2" class="active-result" ng-click="updateTab('transact',false)">Transaction Record</li>

                                    <li id="search_bedrooms_chzn_o_2" class="active-result" ng-click="updateTab('',false)"><a target="_blank" href="/properties/auction">Auction</a></li>
                                    <li id="search_bedrooms_chzn_o_2" class="active-result" ng-click="updateTab('',false)"><a target="_blank" href="/properties/marketingproject">Marketing Project</a></li>
                                    <li id="search_bedrooms_chzn_o_2" class="active-result" ng-click="updateTab('',false)"><a target="_blank" href="/nearby">Nearby</a></li>
                                    <li id="search_bedrooms_chzn_o_2" class="active-result" ng-click="updateTab('',false)"><a target="_blank" href="/map-search">Map Search</a></li>

                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane active" id="tab-sale">
                        <div class="row">
                            <div class="col-sm-12 tab-pane-container" ng-class="{'floatNone': is_mobile == true,'tablet-tab-container': is_tablet}">
                                <form ng-class="{'marginTop': is_mobile}">

                                    <div class="form-group">

                                        <div ng-show="is_mobile == false && is_tablet == true" class="form-control-small" ng-class="{'tablet-form-size': is_tablet}">

                                            <div id="search_bedrooms_chzn" class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 38.199px;" title="">
                                                <a ng-click="updateTabChanged = true" href="javascript:void(0)" class="chzn-single chzn-default" tabindex="-1">
                                                    <span>{{ currentActiveTab }}</span><div><b></b></div>
                                                </a>
                                                <div ng-show="updateTabChanged == true" class="chzn-drop" style="left:-9000px;">
                                                    <div class="chzn-search"><input type="text" autocomplete="off"></div>
                                                    <ul class="chzn-results">
                                                        <li id="search_bedrooms_chzn_o_1" class="active-result" ng-click="updateTab('sale',false)">Sale</li>
                                                        <li id="search_bedrooms_chzn_o_2" class="active-result" ng-click="updateTab('rent',false)">Rent</li>
                                                        <li id="search_bedrooms_chzn_o_2" class="active-result" ng-click="updateTab('transact',false)">Transaction Record</li>

                                                        <li id="search_bedrooms_chzn_o_2" class="active-result" ng-click="updateTab('',false)"><a target="_blank" href="/properties/auction">Auction</a></li>
                                                        <li id="search_bedrooms_chzn_o_2" class="active-result" ng-click="updateTab('',false)"><a target="_blank" href="/properties/marketingproject">Marketing Project</a></li>
                                                        <li id="search_bedrooms_chzn_o_2" class="active-result" ng-click="updateTab('',false)"><a target="_blank" href="/nearby">Nearby</a></li>
                                                        <li id="search_bedrooms_chzn_o_2" class="active-result" ng-click="updateTab('',false)"><a target="_blank" href="/map-search">Map Search</a></li>

                                                    </ul>
                                                </div>
                                            </div>
                                        </div>



                                        <div class="form-control-small" ng-class="{'tablet-form-size': is_tablet}">
                                            <div id="search_bedrooms_chzn" class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 38.199px;" title="">
                                                <a ng-click="propertyTypeChanged = true" href="javascript:void(0)" class="chzn-single chzn-default" tabindex="-1">
                                                    <span>{{ property.TypeName }}</span><div><b></b></div>
                                                </a>
                                                <div ng-show="propertyTypeChanged == true" class="chzn-drop" style="left:-9000px;">
                                                    <div class="chzn-search"><input type="text" autocomplete="off"></div>
                                                    <ul class="chzn-results">
                                                        <li id="search_bedrooms_chzn_o_1" class="active-result" ng-click="updateProperty('R',false)">Residential</li>
                                                        <li id="search_bedrooms_chzn_o_2" class="active-result" ng-click="updateProperty('C',false)">Commercial</li>
                                                        <li id="search_bedrooms_chzn_o_3" class="active-result" ng-click="updateProperty('I',false)">Industrial</li>
                                                        <li id="search_bedrooms_chzn_o_4" class="active-result" ng-click="updateProperty('L',false)">Land</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>


                                        <div class="form-control-small" ng-class="{'tablet-form-size': is_tablet}">
                                            <div id="search_prop_type_chzn" class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 101.026px;" title="">
                                                <a ng-click="propertyStateChanged = true" href="javascript:void(0)" class="chzn-single chzn-default" tabindex="-1">
                                                    <span>{{ property.StateName }}</span><div><b></b></div>
                                                </a>

                                                <div ng-show="propertyStateChanged == true" class="chzn-drop" style="left:-9000px;">
                                                    <div class="chzn-search">
                                                        <input type="text" autocomplete="off">
                                                    </div>
                                                    <ul class="chzn-results">
                                                        <li ng-repeat="state in states" id="search_prop_type_chzn_o_1" class="active-result" ng-mousedown="
                                                            propertyStateId=state.StateId;
                                                            propertyStateName=state.State;
                                                            propertyStateChanged=false;
                                                            changeState(propertyStateId,propertyStateName,false); ">{{ state.State }}</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-control-small" ng-class="{'tablet-form-size': is_tablet}">
                                            <select id="search_status" name="search_status" data-placeholder="Status" class="chzn-done" style="display: none;">
                                                <option value=""> </option>
                                                <option value="sale">For Sale</option>
                                                <option value="rent">For Rent</option>
                                            </select>
                                            <div id="search_status_chzn" class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 77.4031px;" title="">
                                                <a ng-click="propertyLocationChanged = true" href="javascript:void(0)" class="chzn-single chzn-default" tabindex="-1">
                                                    <span>{{ property.LocationName }}</span><div><b></b></div>
                                                </a>
                                                <div ng-show="propertyLocationChanged == true" class="chzn-drop" style="left:-9000px;">
                                                    <div class="chzn-search"><input type="text" autocomplete="off"></div>
                                                    <ul class="chzn-results">
                                                        <li ng-repeat="location in locations" id="search_status_chzn_o_1" class="active-result"
                                                            ng-mousedown="
                                                            updateLocation(location.Location,false);">{{ location.Location }}</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-control-large form-responsive" ng-class="{'tablet-form-size': is_tablet}">
                                            <input ng-enter="search('S')" ng-model="property.Project" type="text" class="form-control" name="location" placeholder="Road/Project Name">
                                        </div>

                                        <div class="break-block"></div>

                                        <div class="form-control-small" ng-class="{'tablet-form-size': is_tablet}">
                                            <input type="text" class="form-control" name="project" ng-model="property.PriceMin" placeholder="Min Price (RM)" />
                                        </div>

                                        <div class="form-control-small" ng-class="{'tablet-form-size': is_tablet}">
                                            <input ng-model="property.PriceMax" type="text" class="form-control" name="project" placeholder="Max Price (RM)" />
                                        </div>

                                        <div style="display: inline-block;">
                                            <a target="_blank" style=" background-color:#fff200!important;color:black!important;" class="btn btn-fullcolor" href="/nearby" ng-class="{'mobile-btn-height': is_mobile == true}">
                                                Go to Nearby <br ng-show="is_mobile == true" />Sale Properties
                                            </a>
                                        </div>


                                        <button ng-click="search('S')" type="submit" class="btn btn-fullcolor">Search</button>
                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="tab-rent">
                        <div class="row">
                            <div style="margin-top:0px!important;" class="col-sm-12" ng-class="{'floatNone': is_mobile == true,'tablet-tab-container': is_tablet}">
                                <form ng-class="{'marginTop': is_mobile}">
                                    <div class="form-group">
                                        <div ng-show="is_mobile == false && is_tablet == true" class="form-control-small" ng-class="{'tablet-form-size': is_tablet}">

                                            <div id="search_bedrooms_chzn" class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 38.199px;" title="">
                                                <a ng-click="updateTabChanged = true" href="javascript:void(0)" class="chzn-single chzn-default" tabindex="-1">
                                                    <span>{{ currentActiveTab }}</span><div><b></b></div>
                                                </a>
                                                <div ng-show="updateTabChanged == true" class="chzn-drop" style="left:-9000px;">
                                                    <div class="chzn-search"><input type="text" autocomplete="off"></div>
                                                    <ul class="chzn-results">
                                                        <li id="search_bedrooms_chzn_o_1" class="active-result" ng-click="updateTab('sale',false)">Sale</li>
                                                        <li id="search_bedrooms_chzn_o_2" class="active-result" ng-click="updateTab('rent',false)">Rent</li>
                                                        <li id="search_bedrooms_chzn_o_2" class="active-result" ng-click="updateTab('transact',false)">Transaction Recrod</li>

                                                        <li id="search_bedrooms_chzn_o_2" class="active-result" ng-click="updateTab('',false)"><a target="_blank" href="/properties/auction">Auction</a></li>
                                                        <li id="search_bedrooms_chzn_o_2" class="active-result" ng-click="updateTab('',false)"><a target="_blank" href="/properties/marketingproject">Marketing Project</a></li>
                                                        <li id="search_bedrooms_chzn_o_2" class="active-result" ng-click="updateTab('',false)"><a target="_blank" href="/nearby">Nearby</a></li>
                                                        <li id="search_bedrooms_chzn_o_2" class="active-result" ng-click="updateTab('',false)"><a target="_blank" href="/map-search">Map Search</a></li>

                                                    </ul>
                                                </div>
                                            </div>
                                        </div>


                                        <div class="form-control-small" ng-class="{'tablet-form-size': is_tablet}">
                                            <div id="search_bedrooms_chzn" class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 38.199px;" title="">
                                                <a ng-click="propertyTypeChanged = true" href="javascript:void(0)" class="chzn-single chzn-default" tabindex="-1">
                                                    <span>{{ property.TypeName }}</span><div><b></b></div>
                                                </a>
                                                <div ng-show="propertyTypeChanged == true" class="chzn-drop" style="left:-9000px;">
                                                    <div class="chzn-search"><input type="text" autocomplete="off"></div>
                                                    <ul class="chzn-results">
                                                        <li id="search_bedrooms_chzn_o_1" class="active-result" ng-click="updateProperty('R',false)">Residential</li>
                                                        <li id="search_bedrooms_chzn_o_2" class="active-result" ng-click="updateProperty('C',false)">Commercial</li>
                                                        <li id="search_bedrooms_chzn_o_3" class="active-result" ng-click="updateProperty('I',false)">Industrial</li>
                                                        <li id="search_bedrooms_chzn_o_4" class="active-result" ng-click="updateProperty('L',false)">Land</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-control-small" ng-class="{'tablet-form-size': is_tablet}">
                                            <div id="search_prop_type_chzn" class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 101.026px;" title="">
                                                <a ng-click="propertyStateChanged = true" href="javascript:void(0)" class="chzn-single chzn-default" tabindex="-1">
                                                    <span>{{ property.StateName }}</span><div><b></b></div>
                                                </a>

                                                <div ng-show="propertyStateChanged == true" class="chzn-drop" style="left:-9000px;">
                                                    <div class="chzn-search">
                                                        <input type="text" autocomplete="off">
                                                    </div>
                                                    <ul class="chzn-results">
                                                        <li ng-repeat="state in states" id="search_prop_type_chzn_o_1" class="active-result" ng-mousedown="
                                                            propertyStateId=state.StateId;
                                                            propertyStateName=state.State;
                                                            propertyStateChanged=false;
                                                            changeState(propertyStateId,propertyStateName,false); ">{{ state.State }}</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-control-small" ng-class="{'tablet-form-size': is_tablet}">
                                            <select id="search_status" name="search_status" data-placeholder="Status" class="chzn-done" style="display: none;">
                                                <option value=""> </option>
                                                <option value="sale">For Sale</option>
                                                <option value="rent">For Rent</option>
                                            </select>
                                            <div id="search_status_chzn" class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 77.4031px;" title="">
                                                <a ng-click="propertyLocationChanged = true" href="javascript:void(0)" class="chzn-single chzn-default" tabindex="-1">
                                                    <span>{{ property.LocationName }}</span><div><b></b></div>
                                                </a>
                                                <div ng-show="propertyLocationChanged == true" class="chzn-drop" style="left:-9000px;">
                                                    <div class="chzn-search"><input type="text" autocomplete="off"></div>
                                                    <ul class="chzn-results">
                                                        <li ng-repeat="location in locations" id="search_status_chzn_o_1" class="active-result"
                                                            ng-mousedown="
                                                            updateLocation(location.Location,false);">{{ location.Location }}</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-control-large" ng-class="{'tablet-form-size': is_tablet}">
                                            <input ng-enter="search('R')" ng-model="property.Project" type="text" class="form-control" name="location" placeholder="Road/Project Name">
                                        </div>

                                        <div class="break-block"></div>

                                        <div class="form-control-small" ng-class="{'tablet-form-size': is_tablet}">
                                            <input type="text" class="form-control" name="project" ng-model="property.PriceMin" placeholder="Min Price (RM)" />
                                        </div>

                                        <div class="form-control-small" ng-class="{'tablet-form-size': is_tablet}">
                                            <input ng-model="property.PriceMax" type="text" class="form-control" name="project" placeholder="Max Price (RM)" />
                                        </div>

                                        <div style="display: inline-block;">
                                            <a target="_blank" href="/nearby/rent" style="background-color: #fff200!important;color: black!important;" class="btn btn-fullcolor" ng-class="{'mobile-btn-height': is_mobile == true}">
                                                Go to Nearby <br ng-show="is_mobile == true" />Rent Properties
                                            </a>
                                        </div>

                                        <button ng-click="search('R')" type="submit" class="btn btn-fullcolor">Search</button>
                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="tab-transaction">
                        <div class="row">
                            <div ng-class="{'floatNone': is_mobile == true, 'tablet-tab-container': is_tablet}" style="margin-top:0px!important;" class="col-sm-12">
                                <form ng-class="{'marginTop': is_mobile}">
                                    <div class="form-group">
                                        <div ng-show="is_mobile == false && is_tablet == true" class="form-control-small" ng-class="{'tablet-form-size': is_tablet}">

                                            <div id="search_bedrooms_chzn" class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 38.199px;" title="">
                                                <a ng-click="updateTabChanged = true" href="javascript:void(0)" class="chzn-single chzn-default" tabindex="-1">
                                                    <span>{{ currentActiveTab }}</span><div><b></b></div>
                                                </a>
                                                <div ng-show="updateTabChanged == true" class="chzn-drop" style="left:-9000px;">
                                                    <div class="chzn-search"><input type="text" autocomplete="off"></div>
                                                    <ul class="chzn-results">
                                                        <li id="search_bedrooms_chzn_o_1" class="active-result" ng-click="updateTab('sale',false)">Sale</li>
                                                        <li id="search_bedrooms_chzn_o_2" class="active-result" ng-click="updateTab('rent',false)">Rent</li>
                                                        <li id="search_bedrooms_chzn_o_2" class="active-result" ng-click="updateTab('transact',false)">Transaction Record</li>

                                                        <li id="search_bedrooms_chzn_o_2" class="active-result" ng-click="updateTab('',false)"><a target="_blank" href="/properties/auction">Auction</a></li>
                                                        <li id="search_bedrooms_chzn_o_2" class="active-result" ng-click="updateTab('',false)"><a target="_blank" href="/properties/marketingproject">Marketing Project</a></li>
                                                        <li id="search_bedrooms_chzn_o_2" class="active-result" ng-click="updateTab('',false)"><a target="_blank" href="/nearby">Nearby</a></li>
                                                        <li id="search_bedrooms_chzn_o_2" class="active-result" ng-click="updateTab('',false)"><a target="_blank" href="/map-search">Map Search</a></li>

                                                    </ul>
                                                </div>
                                            </div>
                                        </div>


                                        <div class="form-control-large" ng-class="{'tablet-form-size': is_tablet}">
                                            <input ng-enter="search('T')" type="text" ng-model="property.keyword" class="form-control" name="location" placeholder="Road/Project Name">
                                        </div>

                                        <div class="form-control-small" ng-class="{'tablet-form-size': is_tablet}">
                                            <div id="search_bedrooms_chzn" class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 38.199px;" title="">
                                                <a ng-click="propertyTransactionChanged = true" href="javascript:void(0)" class="chzn-single chzn-default" tabindex="-1">
                                                    <span>{{ property.TransactionName }}</span><div><b></b></div>
                                                </a>
                                                <div ng-show="propertyTransactionChanged == true" class="chzn-drop" style="left:-9000px;">
                                                    <div class="chzn-search"><input type="text" autocomplete="off"></div>
                                                    <ul class="chzn-results">
                                                        <li id="search_bedrooms_chzn_o_1" class="active-result" ng-click="updateTransaction('S',false)">Sale</li>
                                                        <li id="search_bedrooms_chzn_o_2" class="active-result" ng-click="updateTransaction('R',false)">Rent</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-control-small" ng-class="{'tablet-form-size': is_tablet}">
                                            <div id="search_bedrooms_chzn" class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 38.199px;" title="">
                                                <a ng-click="transactPropertyTypeChanged = true" href="javascript:void(0)" class="chzn-single chzn-default" tabindex="-1">
                                                    <span>{{ property.TransactTypeName }}</span><div><b></b></div>
                                                </a>
                                                <div ng-show="transactPropertyTypeChanged == true" class="chzn-drop" style="left:-9000px;">
                                                    <div class="chzn-search"><input type="text" autocomplete="off"></div>
                                                    <ul class="chzn-results">
                                                        <li id="search_bedrooms_chzn_o_1" class="active-result" ng-click="updateTransactProperty('I',false)">Industrial</li>
                                                        <li id="search_bedrooms_chzn_o_1" class="active-result" ng-click="updateTransactProperty('D',false)">Development</li>
                                                        <li id="search_bedrooms_chzn_o_1" class="active-result" ng-click="updateTransactProperty('A',false)">Agriculture</li>
                                                        <li id="search_bedrooms_chzn_o_1" class="active-result" ng-click="updateTransactProperty('C',false)">Commercial</li>
                                                        <li id="search_bedrooms_chzn_o_1" class="active-result" ng-click="updateTransactProperty('R',false)">Residential</li>
                                                        <li id="search_bedrooms_chzn_o_1" class="active-result" ng-click="updateTransactProperty('O',false)">Others</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-control-small" ng-class="{'tablet-form-size': is_tablet}">
                                            <div id="search_status_chzn" class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 77.4031px;" title="">
                                                <a ng-click="districtChanged = true" href="javascript:void(0)" class="chzn-single chzn-default" tabindex="-1">
                                                    <span>{{ property.districtName }}</span><div><b></b></div>
                                                </a>
                                                <div ng-show="districtChanged == true" class="chzn-drop" style="left:-9000px;">
                                                    <div class="chzn-search"><input type="text" autocomplete="off"></div>
                                                    <ul class="chzn-results">
                                                        <li ng-repeat="d in districts" id="search_status_chzn_o_1" class="active-result"
                                                            ng-mousedown="updateDistrict(d,false);">{{ d }}</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>


                                        <div ng-if="is_mobile == false" style="display: inline-block;">
                                            <a target="_blank" style="background-color: #fff200!important;color: black!important;" class="btn btn-fullcolor" href="/transaction/recentTransact">
                                                Go to Shi Jie Property Transaction
                                            </a>
                                        </div>

                                        <div ng-if="is_mobile == true" style="display: inline-block;">
                                            <a target="_blank" style="background-color: #fff200!important;color: black!important;" class="btn btn-fullcolor" href="/transaction/recentTransact">
                                                Go Property Transaction
                                            </a>
                                        </div>

                                        <button ng-click="search('T')" type="submit" class="btn btn-fullcolor">Search</button>
                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- END MAP PROPERTY FILTER -->


</div>
<!-- BEGIN ACTION BOX -->
<div class="action-box">
    <div class="container">
        <div class="row">
            <form ng-submit="submitForm($event)">
                <div class="col-md-4">
                    <h3>Subscribe our <strong>Newsletter</strong></h3>
                </div>
                <div class="col-md-4">
                    <div id="newsletter" class="center">
                        <div class="input-group">
                            <input ng-enter="submitForm($event)" ng-model="subscription_email" type="text" placeholder="Enter your E-mail" name="subscription_email" id="email" class="form-control" />
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="submit">Subscribe</button>
                            </span>
                        </div>
                    </div>
                </div>
            </form>

            <div class="col-md-4">
                <!-- BEGIN SOCIAL NETWORKS -->
                <ul class="social-networks">
                    <li><a target="_blank" href="https://www.facebook.com/shijieproperty"><i class="fa fa-facebook"></i></a></li>
                    <li><a target="_blank" href="https://twitter.com/ShijieProperty"><i class="fa fa-twitter"></i></a></li>
                    <li><a target="_blank" href="https://plus.google.com/106367203153741090383"><i style="color: rgba(160, 75, 57,1)!important;" class="fa fa-google"></i></a></li>
                    <li><a target="_blank" href="https://www.linkedin.com/company/13258010/details/"><i class="fa fa-linkedin"></i></a></li>
                    <li><a target="_blank" href="whatsapp://send?text=Introduce Shi Jie Property http://www.shijieproperty.com.my/" data-action="share/whatsapp/share"><i class="fa fa-whatsapp"></i></a></li>
                    <li><a href="mailto:{{email}}"><i class="fa fa-envelope"></i></a></li>
                </ul>
                <!-- END SOCIAL NETWORKS -->
            </div>
        </div>
    </div>
</div>

<!-- END ACTION BOX -->
<!-- BEGIN CONTENT 1 WRAPPER -->

<div class="content gray">
    <div class="container">
        <div class="row">
            <!-- BEGIN MAIN CONTENT 1 -->
            <div id="NewsProperty" class="col-sm-4">
                <h1 class="section-title" data-animation-direction="from-left" data-animation-delay="50">News</h1>
                <ul class="agency-detail-agents clearfix">
                    <li ng-repeat="item in news" data-animation-direction="from-left" data-animation-delay="250" style="width:100%">
                        <a href="/info/news/details/{{ item.NewsId }}"><img src="{{item.PropertyURL}}" alt="" /></a>
                        <div class="info">
                            <a href="/info/news/details/{{ item.NewsId }}"><h3>{{item.Title}}</h3></a>
                            <p>{{ item.Details | limitTo:20 }}</p>
                        </div>
                    </li>
                </ul>
                <div class="col-lg-12 center">
                    <a target="_blank" href="/info/news" class="btn btn-default-color">View More</a>
                </div>
                <br>
            </div>
            <div id="NewsProperty" class="col-sm-4">
                <h1 class="section-title" data-animation-direction="from-left" data-animation-delay="50">Useful Property Info</h1>

                <ul class="agency-detail-agents clearfix">
                    <li ng-repeat="info in usefulinfo" data-animation-direction="from-left" data-animation-delay="250">
                        <a href="/info/usefulInfo/details/{{ info.InfoId }}"><img src="{{ info.PropertyURL}}" alt="" /></a>
                        <div class="info">
                            <a href="/info/usefulInfo/details/{{ info.InfoId }}"><h3>{{ info.Title }}</h3></a>
                            <p>{{ info.Details | limitTo:20 }}</p>
                        </div>
                    </li>
                </ul>
                <div class="col-lg-12 center">
                    <a target="_blank" href="/info/usefulInfo" class="btn btn-default-color">View More</a>
                </div>
                <br>
            </div>


            <!-- END MAIN CONTENT 1-->
            <!-- BEGIN SIDEBAR 1 -->
            <div class="sidebar gray col-sm-4">
                <!--   <h2 class="section-title" data-animation-direction="from-bottom" data-animation-delay="50">About Us</h2> -->
                <div class="contact-us"
                     data-animation-direction="from-bottom"
                     data-animation-delay="250"
                     style="background-color: black; color:white;">

                    <p>Find our latest & updated  property listings.</p>
                    <p>Visit and explore our property website to discover your "hidden opportunities".</p>

                    <hr style="border-top: 5px solid #C90928!important;" />
                    <p>Guaranteed</p>

                    <ul>
                        <li>No "Fishing"</li>
                        <li>No "Fake"</li>
                        <li>No "Double listings"</li>
                    </ul>


                    <!--{{ description }}-->


                </div>



                <!-- <h2 class="section-title" data-animation-direction="from-bottom" data-animation-delay="50">Contact Us</h2>
                <ul class="contact-us" data-animation-direction="from-bottom" data-animation-delay="250">
                    <li><i class="fa fa-map-marker"></i> {{ address }}</li>
                    <li><i class="fa fa-phone"></i> <a href="tel:+6{{MobilePhone}}"> {{ MobilePhone }}</a></li>
                    <li><i class="fa fa-envelope"></i> <a href="mailto:{{email}}">{{ email }}</a></li>
                </ul>-->



                <iframe id="poll-iframe2" style="display:none;position: absolute;height: 90%;border: none;width:100%;"
                        scrolling="no" src="https://www.opinionstage.com/polls/2409394/poll" frameBorder="0" name="os_frame" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>


                <div id="poll-container" style="position:relative;width:100%">
                    <iframe id="poll-iframe" style="position: absolute;height: 120%;border: none;"
                            scrolling="no" src="https://www.opinionstage.com/polls/2409394/poll" frameBorder="0" name="os_frame" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                </div>


            </div>
            <!-- END SIDEBAR 1 -->
        </div>
    </div>
</div>

<!-- BEGIN CONTENT 1 WRAPPER -->
<!-- BEGIN CONTENT WRAPPER -->

<div class="content">
    <div class="container">
        <div class="row">
            <!-- BEGIN MAIN CONTENT -->
            <div class="main col-sm-12">
                <h1 class="section-title" data-animation-direction="from-bottom" data-animation-delay="50">Our Marketing Project</h1>
                <div class="grid-style1">
                    <div ng-repeat="mProject in marketingprojects" class="item col-md-3" data-animation-direction="from-bottom" data-animation-delay="250">
                        <div class="image">
                            <a href="/property/marketing/details/{{ mProject.ProjectId }}">
                                <span class="btn btn-default"><i class="fa fa-file-o"></i> Read More</span>
                            </a>
                            <img ng-if="!isEmpty(mProject.PropertyURL)" src="{{ mProject.PropertyURL }}" alt="" />
                            <img ng-if="isEmpty(mProject.PropertyURL)" src="/images/penangrealty-logo.png" />

                        </div>
                        <div class="price">
                            <span>Open For Sale</span>
                            <span>{{ mProject.ProjectPrice }}</span>
                            <!--<span>{{ mProject.ProjectPrice | currency:2 }}</span>-->
                        </div>

                        <div class="info-blog">
                            <ul class="top-info">
                                <li><i class="fa fa-tags"></i>{{ mProject.ProjectLocation }}</li>
                            </ul>
                            <h3>
                                <a href="/property/marketing/details/{{ mProject.ProjectId }}">{{ mProject.ProjectName }}</a>
                            </h3>
                            <p>{{ mProject.ProjectDetails | limitTo: 79}}...</p>
                        </div>
                    </div>
                </div>

                <div class="center"><a target="_blank" href="/properties/marketingproject" class="btn btn-default-color" data-animation-direction="from-bottom" data-animation-delay="850">View More</a></div>

                <!--<h1 class="section-title" data-animation-direction="from-bottom" data-animation-delay="50">New Launch</h1>
                <div class="grid-style1">
                    <div ng-repeat="item in newlaunch"class="item col-md-3" data-animation-direction="from-bottom" data-animation-delay="250">
                        <div class="image">
                            <a href="blog-detail.html">
                                <span class="btn btn-default"><i class="fa fa-file-o"></i> Read More</span>
                            </a>
                            <img src="{{ item.PropertyURL }}" alt="" />
                        </div>
                        <div class="tag"><i class="fa fa-file-text"></i></div>
                        <div class="info-blog">
                            <ul class="top-info">
                                <li><i class="fa fa-tags"></i>{{ item.ProjectLocation }}</li>
                            </ul>
                            <h3>
                                <a href="blog-detail.html">{{ item.ProjectName }}</a>
                            </h3>
                            <p>{{ item.ProjectDetails | limitTo: 200 }}...</p>
                        </div>
                    </div>
                </div>

                <div class="center"><a target="_blank" href="/properties/newLaunch" class="btn btn-default-color" data-animation-direction="from-bottom" data-animation-delay="850">View More</a></div>-->

                <h1 class="section-title" data-animation-direction="from-bottom" data-animation-delay="50">Best Deal Properties</h1>
                <div class="grid-style1">

                    <div ng-repeat="bestItem in bestbuy" class="item col-md-3" data-animation-direction="from-bottom" data-animation-delay="250">
                        <div class="image">
                            <a ng-click="go(bestItem.propertyid,bestItem,bestItem.Transact)" href="/property/{{ bestItem.propertyid }}/{{ bestItem.SaleType }}">
                                <span class="btn btn-default"><i class="fa fa-file-o"></i> Read More</span>
                            </a>
                            <img ng-if="!isEmpty(bestItem.PropertyURL)" src="{{ bestItem.PropertyURL }}" alt="" />
                            <img ng-if="isEmpty(bestItem.PropertyURL)" src="/images/penangrealty-logo.png" />
                        </div>

                        <div class="price">
                            <span>For Sale</span>
                            <span>{{ bestItem.SalePrice | currency:"RM ":2 }}</span>
                        </div>
                        <div class="info-blog">
                            <ul class="top-info">
                                <li><i class="fa fa-tags"></i>{{ bestItem.location }}, {{ bestItem.state}}</li>
                            </ul>
                            <h3>
                                <a ng-click="go(bestItem.propertyid,bestItem,bestItem.Transact)" href="/property/{{ bestItem.propertyid }}/{{ bestItem.SaleType }}">{{ bestItem.ShortHeading}}</a>
                            </h3>
                            <p>{{ bestItem.LongHeading}}</p>
                        </div>
                    </div>
                </div>

                <div class="center"><a target="_blank" href="/properties/bestDeal" class="btn btn-default-color" data-animation-direction="from-bottom" data-animation-delay="850">View More</a></div>

                <h1 class="section-title" data-animation-direction="from-bottom" data-animation-delay="50">New Sale Listing</h1>
                <div class="grid-style1">
                    <div ng-repeat="nsl in newSaleListings" class="item col-md-3" data-animation-direction="from-bottom" data-animation-delay="250">
                        <div class="image">
                            <a ng-click="go(nsl.propertyid, nsl, nsl.SaleType[0])" href="/property/{{ nsl.propertyid }}/{{ nsl.SaleType }}">
                                <span class="btn btn-default"><i class="fa fa-file-o"></i> Read More</span>
                            </a>
                            <img ng-if="!isEmpty(nsl.PropertyURL)" src="{{ nsl.PropertyURL }}" alt="" />
                            <img ng-if="isEmpty(nsl.PropertyURL)" src="/images/penangrealty-logo.png" />

                        </div>
                        <div class="price">
                            <span>For Sale</span>
                            <span>{{ nsl.SalePrice | currency:"RM ":2  }}</span>
                        </div>
                        <div class="info-blog">
                            <ul class="top-info">
                                <li><i class="fa fa-tags"></i>{{ nsl.location }}, {{ nsl.state }}</li>
                            </ul>
                            <h3>
                                <a ng-click="go(nsl.propertyid, nsl, nsl.SaleType[0])" href="/property/{{ nsl.propertyid }}/{{ nsl.SaleType }}">{{ nsl.ShortHeading }}</a>
                            </h3>
                            <p>{{ nsl.LongHeading }}</p>
                        </div>
                    </div>
                </div>
                <div class="center"><a target="_blank" href="/properties/newSale" class="btn btn-default-color" data-animation-direction="from-bottom" data-animation-delay="850">View More</a></div>


                <h1 class="section-title" data-animation-direction="from-bottom" data-animation-delay="50">Auction Listing</h1>
                <div class="grid-style1">
                    <div ng-repeat="aucList in auctionListings" class="item col-md-3" data-animation-direction="from-bottom" data-animation-delay="250">
                        <div class="image">
                            <a href="/property/auction/details/{{ aucList.LelongId }}">
                                <span class="btn btn-default"><i class="fa fa-file-o"></i> Details</span>
                            </a>
                            <img ng-if="!isEmpty(aucList.PropertyURL)" src="{{ aucList.PropertyURL }}" alt="">
                            <img ng-if="isEmpty(aucList.PropertyURL)" src="/images/penangrealty-logo.png" />

                        </div>
                        <div class="price">
                            <span>Reserved Price</span>
                            <span>{{ aucList.Price | currency:"RM ":2  }}</span>
                        </div>
                        <div class="info-blog">
                            <ul class="top-info">
                                <li ng-show="isLogin == true"><i class="fa fa-tags"></i>{{ aucList.Address }}</li>
                                <li ng-show="isLogin == false"><i class="fa fa-tags"></i>{{ aucList.RoadName }}</li>


                            </ul>
                            <h3>
                                <a href="/property/auction/details/{{ aucList.LelongId }}">{{ aucList.Description }}</a>
                                <small>{{ aucList.Type }}</small>
                            </h3>
                            <p ng-show="isLogin == true">{{ aucList.Address }}</p>
                            <p ng-show="isLogin == false">{{ aucList.RoadName }}</p>
                        </div>
                    </div>
                </div>


                <div class="center"><a target="_blank" href="/properties/auction" class="btn btn-default-color" data-animation-direction="from-bottom" data-animation-delay="850">View More</a></div>


            </div>
            <!-- END MAIN CONTENT -->
        </div>
    </div>
</div>
<!-- END CONTENT WRAPPER -->
<!-- BEGIN TESTIMONIALS -->
<!--<div class="parallax dark-bg" style="background-image:url(http://placehold.it/1920x800);" data-stellar-background-ratio="0.5">
    <div class="container">
        <div class="row">
            <div class="col-sm-12" data-animation-direction="from-top" data-animation-delay="50">
                <h2 class="section-title">Testimonials</h2>

                <div id="testimonials-slider" class="owl-carousel testimonials">
                    <div class="item">
                        <blockquote class="text">
                            <p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Pellentesque elementum libero enim, eget gravida nunc laoreet et. Nullam ac enim auctor, fringilla risus at, imperdiet turpis.</p>
                        </blockquote>
                        <div class="col-md-5 center">
                            <div class="author">
                                <img src="http://placehold.it/61x61" alt="" />
                                <div>
                                    Mark Maecenas<br>
                                    <span>CEO at Lorem Ipsum Agency</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="item">
                        <blockquote class="text">
                            <p>Pellentesque elementum libero enim, eget gravida nunc laoreet et. Nullam ac enim auctor, fringilla risus at, imperdiet turpis.</p>
                        </blockquote>
                        <div class="col-md-5 center">
                            <div class="author">
                                <img src="http://placehold.it/61x61" alt="" />
                                <div>
                                    John Doe<br>
                                    <span>CTO at Dolor Sit Amet Agency</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="item">
                        <blockquote class="text">
                            <p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Pellentesque elementum libero enim, eget gravida nunc laoreet et. Nullam ac enim auctor, fringilla risus at, imperdiet turpis. Nullam ac enim auctor, fringilla risus at, imperdiet turpis.</p>
                        </blockquote>
                        <div class="col-md-5 center">
                            <div class="author">
                                <img src="http://placehold.it/61x61" alt="" />
                                <div>
                                    Mary Smith<br>
                                    <span>UFO at Some Agency</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>-->
<!--<div class="parallax dark-bg" style="background-image: url(&quot;http://placehold.it/1920x800&quot;); background-position: -25px 89.9582px;" data-stellar-background-ratio="0.5">
    <div class="container">
        <div class="row">

            <h2 class="section-title">Testimonials</h2>
            <carousel interval="{{ myInterval }}">
                <slide ng-repeat="slide in slides" active="slide.active">
                    QUOTE: {{ slide.quote }}
                    <div class="item">
                        <blockquote class="text">
                            <p>TESTING #1{{ slide.quote}}</p>
                        </blockquote>
                        <div class="col-md-5 center">
                            <div class="author">
                                <img src="http://placehold.it/61x61" alt="" width="61" height="61">
                                <div>
                                    {{ slide.people}}<br>
                                    <span>{{ slide.peopletitle}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </slide>
            </carousel>

             <div class="col-sm-12 animate-from-top animation-from-top" data-animation-direction="from-top" data-animation-delay="50">

            </div>
        </div>
    </div>
</div>-->
<!-- END TESTIMONIALS -->
<!-- BEGIN CONTENT WRAPPER -->
<div class="content">
    <div class="container">
        <div class="row">
            <!-- BEGIN MAIN CONTENT -->
            <div class="main col-sm-12">
                <h1 class="section-title" data-animation-direction="from-bottom" data-animation-delay="50">Download Our App</h1>
                <h5 style="text-align:center">Get continuous updates from mobile app for Android and iOS. Easy to use, fast and reliable.</h5>
                <div style="margin:0 auto">
                    <!--<div style="text-align:center">
                        <div style="margin-bottom:30px"></div>
                    </div>-->
                    <div class="row" style="margin: 0 auto;text-align: center;">
                        <img style="width: 80%;margin-top:30px;" src="images/realtyphoneapp.png">
                    </div>

                    <div class="row" style="width:100%;text-align:center;margin:0 auto">
                        <div style="display:inline-block">
                            <a target="_blank" href="https://itunes.apple.com/us/app/penang-realty/id1000467653?mt=8">
                                <img src="images/ios.png" />
                            </a>
                        </div>
                        <div style="display:inline-block">
                            <a target="_blank" href="https://play.google.com/store/apps/details?id=com.magusapp.property">
                                <img src="images/android2.png" />
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END CONTENT WRAPPER -->
<!-- BEGIN CONTENT WRAPPER -->
<div class="content">
    <div class="container">
        <div class="row">

            <!-- BEGIN MAIN CONTENT -->
            <div class="main col-sm-12">
                <h1 class="section-title" data-animation-direction="from-bottom" data-animation-delay="50">Our Video</h1>
                <h5 style="text-align:center">Introduction to ShiJie Property</h5>
                <div style="text-align:center">
                    <div id="player"></div>
                </div>
                <!--<div style="margin:0 auto;text-align:center;padding-top: 3em;">
                    <iframe title="ShiJie Property" class="youtube-player" type="text/html"
                            width="100%" height="390" src="https://www.youtube.com/embed/1DcfKxgJcyM"
                            frameborder="0" allowFullScreen></iframe>
                </div>-->
            </div>
        </div>
    </div>
</div>

<script>
    // 2. This code loads the IFrame Player API code asynchronously.
    var tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    window.onYouTubePlayerAPIReady = function () {
        var player = new YT.Player('player', {
            height: 400,
            width: 700,
            playerVars: { 'autoplay': 0 },
            videoId: '1DcfKxgJcyM'
        });
    }


    $(document).ready(function () {
        var height = $('#poll-iframe2').height();

    //    alert("H: " + height );

        $('#poll-container').css('height', height);

    });

</script>
<!-- END CONTENT WRAPPER -->
